<template>
    <el-container id="lessors-box">
        <el-header
            >阿里妈妈车位出租管理系统<span id="now-user"
                >欢迎您，{{ nowLessors.username }}
                <span id="quit" @click="quit">退出登录</span></span
            >
        </el-header>
        <el-container>
            <el-aside width="200px">
                <LessorsNav></LessorsNav>
            </el-aside>
            <el-container>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
        <el-footer></el-footer>
    </el-container>
</template>

<script>
import LessorsNav from "../../components/lessors/LessorsNav.vue";
const jwt = require("jsonwebtoken");
import { createNamespacedHelpers } from "vuex";
import { TOKEN_KEY } from "../../../../node-parking/utils/const";
const { mapState, mapMutations } = createNamespacedHelpers("lessors");

export default {
    mounted() {
        const { username } = jwt.verify(localStorage.token, TOKEN_KEY);
        const { _id } = jwt.verify(localStorage.token, TOKEN_KEY);
        this.setNowLessors({ username, _id });
    },
    components: {
        LessorsNav,
    },
    computed: {
        ...mapState(["nowLessors"]),
    },
    methods: {
        ...mapMutations(["setNowLessors"]),
        quit(){
            localStorage.clear();
            this.$router.push('/login')
        }
    },
};
</script>

<style lang="scss">
#lessors-box {
    height: 100vh;
    .el-header {
        height: 50px;
        background: lightgreen;
        line-height: 50px;
        font-size: 30px;
        font-weight: bolder;
        #now-user {
            float: right;
            font-weight: bold;
            font-size: 20px;
            #quit {
                color: red;
                &:hover{
                    cursor: pointer;
                }
            }
            
        }
    }
    .el-footer {
        height: 50px;
        background: lightgreen;
    }
}
</style>